<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">

		<title>动态表格</title>
	</head>
	<body>
		<div id="app">
			<div class="container mt-5">
				<div class="row justify-content-center mb-2">
					<div class="col-6 ml-5">
						<input type="text" placeholder="员工编号">
						<input type="text" placeholder="员工姓名">
						<input type="button" value="添加">
						<input type="button" value="添加">
					</div>
				</div>
				<div class="row justify-content-center">
					<div class="col-6">
						<table class="table table-striped table-bordered text-center">
							<tr>
								<th>编号</th>
								<th>姓名</th>
								<th>入职时间</th>
								<th>操作</th>
							</tr>
							<tr :key="item.id" v-for="item in emps">
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.date}}</td>
								<td>
									<!--@click.prevent表示阻止超链接的默认跳转-->
									<a href="" @click.prevent>删除</a>
									<span>|</span>
									<a href=""  @click.prevent>修改</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
		<script src="js/bootstrap/popper.min.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					emps: [{
							id: 1001,
							name: 'haoren',
							date: ''
						},
						{
							id: 1002,
							name: 'lucy',
							date: ''
						},
						{
							id: 1003,
							name: 'lily',
							date: ''
						},
						{
							id: 1004,
							name: 'jerry',
							date: ''
						}
					]
				}

			});
		</script>
	</body>
</html>
